<template>
  <div class="app-head">
    <div class="app-head-function">
      <div class="app-head-left">
        <img class="userHead" alt="用户头像" :src="userImage" @click="headClick"/>
      </div>
      <div class="app-head-search-content">
        <div class="app-head-search"><label>
          <input type="search" required/>
          <i class="iconfont icon-search"/>
        </label></div>
        <div class="app-head-search-right iconfont icon-scanQR" @click="iconClick('AppScanQR')"></div>
        <div class="app-head-search-right iconfont icon-message" @click="iconClick('AppUserMessage')"></div>
      </div>
    </div>
    <div class="app-user-info" v-show="showUserHeadInfo">
      <div class="app-user-info-model" @click="showUserHeadInfo = false"/>
      <div class="app-user-info-menu">
        <!--TODO:未完成-->
        <ul>
          <li v-for="(item,index) in menus" :key="index" @click="item.clickFun">{{item.text}}</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AppHead',
  data () {
    return {
      direction: 1,
      showUserHeadInfo: false,
      menus: [
        {
          text: '个人信息',
          clickFun() {
            alert("个人信息")
          }
        },
        {
          text: '隐私管理',
          clickFun() {
            alert("隐私管理")
          }
        },
        {
          text: '检查更新',
          clickFun() {
            alert("检查更新")
          }
        },
        {
          text: '关于我们',
          clickFun() {
            alert("关于我们")
          }
        }
      ]
    }
  },
  methods: {
    headClick () {
      let width = document.documentElement.clientWidth
      let height = document.documentElement.clientHeight
      if (width > height) {
        this.showUserHeadInfo = true
      } else {
        this.$router.push({name: 'AppMyInfo'})
      }
    },
    iconClick (name) {
      this.$router.push({name: name})
    }
  },
  props: {
    userImage: {
      type: String,
      default: ''
    }
  }
}
</script>

<style lang="less" scoped>
  @media screen and (orientation: portrait){
    .app-head{
      .app-user-info{
        display: none;
      }
    }
  }
  @media screen and (orientation: landscape) {
    .app-head{
      .app-user-info {
        display: block;
      }
    }
  }

  .app-head {
    width: 100%;
    min-width: 300px;
    background-color: white;

    .app-head-function{
      height: 3.4rem;

      .userHead {
        height: 2.8rem;
        border-radius: 50%;
        margin: auto;
        &:active{
          height: 3rem;
        }
        position: relative;
        top: 50%;
        transform: translateY(-50%);
      }

      .app-head-left {
        float: left;
        width: 4rem;
        height: 3rem;
        text-align: center;
        margin-top: .2rem;
      }

      .app-head-search-content {
        height: 2.2rem;
        width: calc(100% - 4rem);
        float: left;

        position: relative;
        top: 50%;
        transform: translateY(-50%);
      }

      .app-head-search {
        height: 100%;
        float: left;
        width: calc(100% - 6.5rem);
        margin-right: .5rem;

        input[type=search] {
          border: none;
          outline: none;
          height: 100%;
          font-size: .9rem;
          padding: 0 .8rem;
          border-radius: 20px;
          width: 100%;
          background-color: #f5f5f5;
        }

        input[type=search]:valid + i{
          display: none;
        }

        i{
          top: .3rem;
          left: .8rem;
          position: absolute;
          font-size: 1.3rem;
          color: rgba(0, 0, 0, 0.25);
        }
      }

      .app-head-search-right {
        float: left;
        height: 100%;
        width: 2.8rem;
        text-align: center;
      }

      .iconfont {
        padding-top: .1rem;
        font-size: 2rem;
        &:active{
          padding-top: 0;
          font-size: 2.2rem;
        }
      }
    }
    .app-user-info {
      .app-user-info-model{
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1000;
        position: fixed;
        background-color: rgba(0,0,0,.1);
      }
      .app-user-info-menu{
        top: 0;
        left: 0;
        z-index: 1001;
        min-width: 10rem;
        position: fixed;
        height: 100%;
        overflow: auto;
        background-color: white;
        ul{
          li{
            text-align: center;
            height: 2rem;
            border-bottom: 1px rgba(0,0,0,.1) solid;
            &:last-child{
              border-bottom:0;
            }
          }
        }
      }
    }
  }
</style>
